<template>
  <div>
    <y-shelf title="我的优惠券">

      <div slot="content">
        <!--标题-->
        <div class="table-title">
          <span class="name">优惠券名称</span> <span class="address">使用范围</span> <span class="tel">使用门槛</span>
        </div>
        <div v-if="listMemberCoupon.length">
          <div class="address-item" v-for="(item,i) in listMemberCoupon" :key="i">
            <div class="name">满{{item.minPoint}}减{{item.amount}}</div>
            <div class="address-msg">{{item.createTime |filterDate}}~{{item.endTime |filterDate}}</div>
            <div class="telephone">{{item.couponCode}}</div>

            <div class="operation">
              <el-button type="primary" icon="edit" size="small"  @click="update(item)">使用</el-button>
            </div>
          </div>
        </div>

      </div>
    </y-shelf>

  </div>
</template>
<script>
import { listMemberCoupon } from '/api/index'
   import YButton from '/components/YButton'
    import YPopup from '/components/popup'
    import YShelf from '/components/shelf'
    import { getStore } from '/utils/storage'
     import {
      		formatDate
      	} from '@/utils/date';
  export default {
     data () {
       return {
         listMemberCoupon: [],
         popupOpen: false,
         popupTitle: '管理收货地址',
         msg: {
           id: '',
           name: '',
           phoneNumber: '',
           detailAddress: '',
           defaultStatus: false
         },
         userId: ''
       }
     },
       filters: {
         			filterDate(time) {
         				let date = new Date(time);
         				return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
         			},

         			},

     methods: {
       message (m) {
         this.$message.error({
           message: m
         })
       },
       listMemberCoupons () {
         listMemberCoupon().then(res => {
           let data = res.data
           if (data.length) {
             this.listMemberCoupon = res.data

           } else {
             this.listMemberCoupon = []
           }
         })
       },


      },
     created () {
       this.listMemberCoupons()
     },
     components: {
       YButton,
       YPopup,
       YShelf
     }
   }
 </script>
 <style scoped lang="scss">
   .table-title {
     position: relative;
     z-index: 1;
     line-height: 38px;
     height: 38px;
     padding: 0 0 0 38px;
     font-size: 12px;
     background: #eee;
     border-bottom: 1px solid #dbdbdb;
     border-bottom-color: rgba(0, 0, 0, .08);
     .name {
       float: left;
       text-align: left;
     }
     span {
       width: 137px;
       float: left;
       text-align: center;
       color: #838383;
     }
     .address {
       margin-left: 115px;
     }
     .tel {
       margin-left: 195px;
     }
   }

   .address-item {
     display: flex;
     align-items: center;
     height: 115px;
     text-align: center;
     .name {
       width: 106px;
     }
     .address-msg {
       flex: 1;
     }
     .telephone {
       width: 160px;
     }
     .defalut {
       width: 80px;
       > a {
         text-align: center;
         /*display: none;*/
       }
     }
     .operation {
       width: 135px;
       a {
         padding: 10px 5px;
       }
     }
     &:hover {
       .defalut > a {
         display: block;
       }
     }
   }

   .address-item + .address-item {
     border-top: 1px solid #CFCFCF;
   }

   .defalut-address {
     color: #626262;
     display: block;
     pointer-events: none;
     cursor: default;
   }

   .md {
     > div {
       text-align: left;
       margin-bottom: 15px;
       > input {
         width: 100%;
         height: 50px;
         font-size: 18px;
         padding: 10px 20px;
         border: 1px solid #ccc;
         border-radius: 6px;
         box-shadow: 0 3px 5px -4px rgba(0, 0, 0, .4) inset, -1px 0 3px -2px rgba(0, 0, 0, .1) inset;
         line-height: 46px;
       }
     }
   }

   .btn {
     margin: 0;
     width: 100%;
     height: 50px;
     font-size: 14px;
     line-height: 48px
   }
 </style>
